<template>
  <div>
    <!-- 搜索 -->
    <el-form :inline="true" class="query-box">
      <el-form-item label="模块名称">
        <el-input v-model="queryForm.modelName" placeholder="请输入模块名称" class="handle-input"></el-input>
      </el-form-item>
      <el-form-item label="表名">
        <el-input v-model="queryForm.tableName" placeholder="表名" class="handle-input"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryForm.state" placeholder="请选择" clearable class="query-select">
          <el-option v-for="(item, index) in state" :key="index" :label="item.name" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生成时间">
        <el-date-picker
          v-model="dateRange.genTime"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateChange"
          class="handle-datepicker">
        </el-date-picker>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    </el-form>

    <el-table :data="tableData" stripe style="width: 100%" ref="multipleTable" v-loading="tableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
      <el-table-column prop="modelName" label="模块名称" />
      <el-table-column prop="tableName" label="表名" />
      <el-table-column prop="templateType" label="生成模板" />
      <el-table-column prop="genTime" label="生成时间" />
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          {{transformDict('state', scope.row.state)}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button @click="detail(scope.$index, scope.row)">详情</el-button> -->
          <el-button type="text" class="text-button-del" v-if="scope.row.state == '0'" v-has="'gen:reset'"  @click="resetGenLog(scope.$index, scope.row)">撤销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @current-change="pageChange" layout="prev, pager, next" :current-page="queryForm.pageNum" :page-size="queryForm.pageSize" :total="totalNum">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import * as genLog from '@/api/genLog'

export default {
  name: 'GenLog',
  data () {
    return {
      queryForm: {
        modelName: '',
        tableName: '',
        state: '',
        pageNum: this.GLOBAL.pageNum,
        pageSize: this.GLOBAL.pageSize,
        beginGenTime: '',
        endGenTime: ''
      },
      dateRange: {},
      totalNum: 1, // 总页数
      tableData: [], // 表格数据
      tableLoading: true
    }
  },
  methods: {
    pageChange (val) {
      this.queryForm.pageNum = val;
      this.queryList();
    },
    transformDict (key, code) {
      return this.dictinfo(this.GLOBAL.dictKey[key], code);
    },
    search () {
      // this.pageNum = this.GLOBAL.pageNum;
      this.queryList();
    },
    queryList () {
      let param = this.GLOBAL.handlerQueryParam({
        ...this.queryForm
      });
      genLog.genLogList(param).then(res => {
        this.tableData = res.data.list;
        this.totalNum = Number(res.data.total);
        this.tableLoading = false;
      });
    },
    resetGenLog (index, row) {
      this.$confirm('撤销后无法恢复, 确认撤销吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          genLog.reset(row.id)
            .then(res => {
              this.$message.success('撤销成功');
              this.queryList();
            });
        })
    },
    dateChange (value) {
      this.queryForm.beginGenTime = value ? value[0] : '';
      this.queryForm.endGenTime = value ? value[1] : '';
    }
  },
  created () {
    this.queryList();
  },
  computed: {
    ...mapGetters(['dictinfo', 'dictList']),
    state () {
      return this.dictList(this.GLOBAL.dictKey.state);
    }
  }
}
</script>
